import React, { FC, useContext } from 'react';
import { DesignProvider, DesignRedux } from '../DesignRedux';
import { DragOutlined, DeleteOutlined } from '@ant-design/icons';

import styles from './index.less';

const DragBox: FC<any> = (props: any) => {
  const { property, isDragging, connectDragSource } = props;
  const { dispatch, state } = useContext(DesignRedux);

  // 删除节点
  function onClickDel(param: any) {
    const newNodeTree = [...state.nodeTree];
    delNodeItem(newNodeTree, param, param.id);
    dispatch({
      nodeTree: JSON.parse(JSON.stringify(newNodeTree)),
      rightEleProperty: {},
    });
  }

  // 容器组件添加子组件
  function delNodeItem(data: any, node: any, id: string) {
    for (const [index, item] of data.entries()) {
      const { children = [] } = item;
      if (item.id === id) {
        // delete data[index];
        data.splice(index, 1);
      }
      if (item.id !== id && children) {
        delNodeItem(children, node, id);
      }
    }
  }

  return (
    <div className={styles.dragBox}>
      <div className={styles.pointerMove}>
        <DragOutlined />
      </div>
      {props.children}
      <div className={styles.pointerDelete}>
        <DeleteOutlined onClick={() => onClickDel(property)} />
      </div>
    </div>
  );
};

export default DragBox;
